<template>
    <div class="notice">
        <div class="title">
            {{this.notice.name}}
        </div>
        <div class="source">来源：北京泓深科技&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{trimDate(this.notice.createTime)}}</div>
        <div class="content" v-html="this.notice.announcement">
            <!-- {{this.notice.announcement}} -->
        </div>
    </div>
</template>
<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { getNoticeDetail,getReadNotice,updateReadNotice } from "~/api/index.js";
export default {
    data(){
        return {
            notice:{},
            readList:[],
            readListObj:{}
        }
    },
    
    created(){
        let type = this.$route.query.type;
        let id = this.$route.query.id;
        this.getNoticeDetail(id);
        this.getReadNotice()
        
    },
    computed: {
        ...mapState({
            token(state) {
                return state.token;
            },
            user_info(state) {
                return state.user_info;
            },
            theme_color(state) {
                return state.theme_color;
            },
        })
    },
    methods:{
        trimDate(date) {
            if (date) {
                let _date = new Date(date);
                var year = _date.getFullYear();
                var month = _date.getMonth() + 1;
                var date = _date.getDate();
                var hours = _date.getHours();
                var minutes = _date.getMinutes();
                if(month < 10){
                month = '0' + month;
                }
                if(date < 10){
                date = '0' + date;
                }
                if(hours < 10){
                hours = '0' + hours;
                }
                if(minutes < 10){
                minutes = '0' + minutes;
                }
                return year +'.'+ month +'.'+ date+' '+ hours+':'+ minutes;
                // return `${_date.getFullYear()}.${_date.getMonth() +
                //   1}.${_date.getDate()} ${_date.getHours()}:${'0'+_date.getMinutes()}`;
            } else {
                return "未知";
            }
        },
        ...mapMutations(["SET_IS_LOADING"]),
        async getNoticeDetail(id){
            this.SET_IS_LOADING(true);
            let result = await getNoticeDetail(id);
            console.log("result:", result);
            if (result && result.data && result.data.code == 200) {
                console.log(result.data.data);
                this.notice = result.data.data;
            } else {
                this.$Message.error("获取失败！");
                this.SET_IS_LOADING(true);
            }
        },
        async getReadNotice(){
            this.SET_IS_LOADING(true);
            let result = await getReadNotice(this.user_info.id);
            if (result && result.data && result.data.code == 200) {
                // console.log("开始",JSON.parse(result.data.data.readNoticeIds))
                this.readListObj = result.data.data;
                this.readList = JSON.parse(result.data.data.readNoticeIds);
                this.setNoticeIsRead(parseInt(this.$route.query.id));
            } else {
                this.$Message.error("获取失败！");
                this.SET_IS_LOADING(true);
            }
        },
        async setNoticeIsRead(id){
            // this.SET_IS_LOADING(true);
            if(this.readList.indexOf(id) == -1){
                this.readList.push(id);
                // console.log("结束",this.readList)
                
                let params = {
                    userId:this.user_info.id,
                    readNoticeIds:JSON.stringify(this.readList)
                };
                // console.log(params)
                let result = await updateReadNotice(params);
                // console.log("result:", result);
                if (result && result.data && result.data.code == 200) {
                    // console.log(result);
                } else {
                    this.$Message.error("请求失败！");
                    this.SET_IS_LOADING(true);
                }
            }else{
                return false;
            }
            
        }
    }
}
</script>
<style lang="scss">
.notice{
    font-size: 16px;
    font-weight: 400;
    color: #666;
    line-height: 22px;
    text-indent: 32px;
    width: 1200px;
    margin: 0 auto;
    
    .title{
        font-size: 38px;
        font-weight: 400;
        color: #333;
        line-height: 53px;
        // margin: 40px 0 40px;
        padding: 40px 0 0px;
        text-align: center;
    }
    .source{
        text-align: left;
        margin: 40px 0 20px;
    }
    .content{
        padding-bottom: 40px;
    }
}
</style>